<template>
  <div class="experiment-wrapper white-bg">
    <div class="header-bar">
      <div class="header-title">
        <div class="title-logo">
          <div class="logo-text">AI云实验</div>
        </div>
        <div class="title-line"></div>
        <template v-if="tags">
          <div class="tags" v-for="(item, index) in tags" :key="index">
            {{ item }}
          </div>
        </template>
        <div class="title-text">{{ title }}</div>
      </div>
      <header-center
        @change-direction="hooks.handleChangeDirection"
        @change-size="hooks.handleChangeSize"
        @change-history="hooks.handleChangeHistory"
      />
      <div class="header-btns">
        <div class="btns">
          <div class="flex" @click="handleToggleMore">
            <img
              src="@/assets/icon-more-cur.png"
              v-if="showMore"
              class="icons"
            />
            <img src="@/assets/icon-more.png" v-else class="icons" />
            <span class="text" :class="{ blue: showMore }">更多操作</span>
          </div>

          <div class="show-more-box" v-if="showMore">
            <div class="more-btns">
              <img src="@/assets/icon-zoom.png" class="more-icons" />

              <span class="text">放大观测区域</span>
            </div>

            <div class="more-btns">
              <img src="@/assets/icon-adjust.png" class="more-icons" />
              <span class="text">重新安装</span>
            </div>
            <div class="more-btns">
              <img src="@/assets/icon-save.png" class="more-icons" />
              <span class="text">保存草稿</span>
            </div>
            <div class="more-btns">
              <img src="@/assets/icon-tip.png" class="more-icons" />

              <span class="text">操作提示</span>
            </div>
          </div>
        </div>

        <div class="btn-line"></div>
        <div class="btns">
          <img src="@/assets/icon-record-cur.png" class="icons" />
          <span class="text">记录数据</span>
        </div>
        <div class="btn-line"></div>
        <div class="btns">
          <img src="@/assets/icon-time.png" class="icons" />

          <span class="text blue num">{{ realTime }}</span>
        </div>
        <div class="btn-line"></div>
        <div class="header-btn" @click="handleOver">实验完成</div>
      </div>
    </div>
    <div class="experiment-box">
      <!-- 左侧组件 -->
      <sider-step ref="stepRef" />
      <!-- 右侧组件 -->
      <draw />
      <div class="experiment-main">
        <div class="main-box" ref="boxRef">
          <!-- 3d层 -->
          <div class="iframe-box">
            <iframe
              :src="iframeUrlNew"
              ref="iframeRef"
              class="iframe"
              @load="sendChangeStatus"
            ></iframe>
          </div>
        </div>
      </div>
      <!-- 操作提示弹窗 -->
      <start-tip
        :isShow="tipPoupShow"
        @close-tip-poup="handleCloseTipPoup"
      ></start-tip>
      <!-- 结束时提示组件 -->
      <end-tip :isShow="isShowOver" @to-report="handleToReport"></end-tip>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, reactive, watch } from "vue";
import { useRouter } from "vue-router";
//iframe地址
import { iframeUrl } from "@/utils/iframe";
//左侧组件
import siderStep from "@/components/standard/sider-step.vue";
//右侧组件
import draw from "@/components/standard/draw2/index.vue";
//进入页面提示组件
import startTip from "@/components/standard/tip/startTip.vue";
//结束时提示组件
import endTip from "@/components/standard/tip/endTip.vue";
import * as hooks from "@/hooks/useTestHooks";
import { useEventStore } from "@/store/modules/events";
const store = useEventStore();
const iframeRef = hooks.useIframeRef();
const router = useRouter();
const query: any = computed(() => router.currentRoute.value.query);
//页面标题
const title: any = ref("");
//页面标签
const tags: any = ref([]);
//更新页面数据
const getData = () => {
  const data: any = router.currentRoute.value.query;
  title.value = data.name;
  if (data.tag) {
    tags.value = data?.tag?.split(",");
  }
};
const chooseType = ref(null);
const chooseFinifsh = computed(() => {
  return store.chooseFinifsh;
});
watch(
  () => chooseFinifsh,
  (val) => {
    if (val) {
      if (iframeRef.value?.contentWindow) {
        const datas = {
          type: "changeChoose",
          data: "finifsh",
        };
        iframeRef.value.contentWindow.postMessage(datas, "*");
      }
    }
  }
);
//3diframe地址
const iframeUrlNew = computed(() => `${iframeUrl}&expid=${query.value.code}`);
//监听3d传过来的消息
window.addEventListener("message", (e) => {
  console.log("接收iframe的消息：", e.data);
  // if (e.data.type === "sendShowChoose") {//left,right
  //   chooseType.value = e.data.value
  //   store.setChooseType(chooseType.value)
  //   // showBootom.value = e.data;

  // }
});

//更多操作按钮显示隐藏控制
const showMore = ref(false);
//更多操作按钮点击事件控制显示隐藏状态
const handleToggleMore = () => {
  showMore.value = !showMore.value;
};
//iframe加载完成发送消息给3d页面，open状态
const sendChangeStatus = () => {
  if (iframeRef.value?.contentWindow) {
    const datas = {
      type: "changeStatus",
      data: "open",
    };
    iframeRef.value.contentWindow.postMessage(datas, "*");
  }
};
//实验时间
const realTime: any = ref("0:00");
//计时器
const timer = ref<number>();
//进入页面后的提示步骤弹窗
const tipPoupShow = ref(true);
//格式化时间
const formatTime = (elapsedSeconds: number) => {
  const minutes = Math.floor(elapsedSeconds / 60);
  const seconds = String(elapsedSeconds % 60).padStart(2, "0");
  return `${minutes}:${seconds}`;
};
//提示步骤弹窗关闭事件
const handleCloseTipPoup = () => {
  tipPoupShow.value = false;
  clearInterval(timer.value);
  const startTime = Date.now();
  timer.value = setInterval(() => {
    const elapsedTime = Math.floor((Date.now() - startTime) / 1000);
    realTime.value = formatTime(elapsedTime);
  }, 1000);
};
//实验完成弹窗显示隐藏控制
const isShowOver = ref(false);
//实验完成按钮点击事件
const handleOver = () => {
  isShowOver.value = true;
};

const handleToReport = () => {
  router.push({
    path: "/report",
    query: {
      id: query.value.id,
      type: query.value.type,
      code: query.value.code,
      expuid: query.value.expuid,
      homework_id: query.value.homework_id,
    },
  });
};
const stepRef = ref();
onMounted(() => {
  stepRef.value.handleChange(3);
  getData();
});
onUnmounted(() => {
  clearInterval(timer.value);
});
</script>
<style lang="less" scoped>
.experiment-wrapper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.al-radius {
  position: fixed;
  right: 0px;
  top: 50%;
  cursor: pointer;
  z-index: 999;
  transform: translateY(-50%);
  width: 111px;
  height: 120px;
  background: url(@/assets/ai-radius.png) no-repeat center;
  background-size: 100%;
}
.tip-box-poup {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  .tip-bg {
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
  }
  .tip-button {
    width: 437px;
    z-index: 10002;
    cursor: pointer;
    height: 59px;
    background: #2776ff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 24px;
    color: #ffffff;
    line-height: 30px;
    img {
      width: 30px;
      height: 30px;
      margin-left: 10px;
    }
  }
  .tip-box-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
    .tip-tab {
      width: auto;
      .tab-hd {
        height: 60px;
        display: flex;
        align-items: center;
        .hd-item {
          width: 162px;
          height: 60px;
          margin-right: 6px;
          background: #edf3fe;
          border-radius: 20px 20px 0 0;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 16px;
          color: #262626;
          text-align: center;

          &.cur {
            background: #2776ff;
            border: 1px solid #e6ebf1;
            border-radius: 0;
            color: #fff;
          }
        }
      }
      .tab-bd-box {
        width: 1081px;
        height: 485px;
        overflow-y: auto;
        background: #ffffff;
        border: 1px solid #e6ebf1;
        border-radius: 0 20px 20px 20px;
        .tab-bd {
          padding: 20px;
          display: flex;
          box-sizing: border-box;
          min-height: 100%;
          flex-direction: column;
          justify-content: center;
          .content-text {
            font-family: PingFangSC-Regular;
            font-weight: 400;
            font-size: 20px;
            color: #262626;
            letter-spacing: 0;
            line-height: 1.5;
            text-align: left;
          }
          .content-img {
            width: 50%;
            height: auto;
            margin: 20px auto;
            img {
              width: 100%;
            }
          }
        }
      }
    }
  }
}
.header-bar {
  display: flex;
  background: #fff;
  padding: 0 16px;
  height: 50px;
  position: relative;
  z-index: 99;
  justify-content: space-between;
  border-bottom: 1px solid #cecece;
  .header-title {
    display: flex;
    align-items: center;
    .title-logo {
      display: flex;
      align-items: center;
      .login-text {
        font-family: FZZYJW--GB1-0;
        font-weight: 0;
        font-size: 14px;
        color: #262626;
      }
    }
    .title-line {
      width: 1px;
      height: 12px;
      background: #e8e9ed;
      margin: 0 12px;
    }
    .tags {
      padding: 0 8px;
      height: 24px;
      background: #eb61171a;
      border-radius: 4px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      color: #eb6117;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 8px;
    }
    .title-text {
      line-height: 20px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 14px;
      color: #262930;
    }
  }
  .header-btns {
    display: flex;
    align-items: center;
    .btn-line {
      width: 1px;
      height: 12px;
      background: #e8e9ed;
      margin: 0 16px;
    }
    .btns {
      display: flex;
      align-items: center;
      height: 20px;
      cursor: pointer;
      position: relative;
      .icons {
        width: 16px;
        height: 16px;
        margin-right: 4px;
      }
      .text {
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 14px;
        color: #262930;
        &.num {
          font-family: DS-Digital;
          font-size: 16px;
        }
        &.blue {
          color: #2776ff;
        }
      }
      .flex {
        display: flex;
        align-items: center;
      }
      .show-more-box {
        position: absolute;
        left: 0;
        top: 45px;
        width: 156px;
        background: #ffffff;
        border: 1px solid #e6ebf1;
        box-shadow: 0 2px 20px 0 #0050cb14;
        border-radius: 8px;
        box-sizing: border-box;
        padding: 8px;

        .more-btns {
          display: flex;
          align-items: center;
          height: 40px;
        }
        .more-icons {
          width: 16px;
          height: 16px;
          margin-right: 4px;
        }
      }
    }
    .header-btn {
      padding: 0 14px;
      height: 30px;
      cursor: pointer;
      background: #2776ff;
      border-radius: 15px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      line-height: 30px;
      color: #ffffff;
    }
  }
}
.experiment-box {
  height: calc(100% - 51px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fafafa;
  position: relative;
  .experiment-main {
    flex: 1;
    height: 100%;
    display: flex;
    position: relative;
    justify-content: space-between;
    .main-box {
      flex: 1;
      height: 100%;
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
      .iframe-box {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        position: relative;
        z-index: 1;
        .iframe {
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          border: 0;
        }
      }
      .report-tip {
        position: absolute;
        bottom: 12px;
        left: 12px;
        right: 12px;
        height: 100px;
        background: #2776ff;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        .tip-title {
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 24px;
          color: #ffffff;
          line-height: 30px;
        }
        .tip-arrow {
          background: url(@/assets/icon-arrow-link.png) no-repeat center;
          width: 30px;
          height: 30px;
          margin-left: 8px;
        }
      }
    }
    .sider-box {
      width: 300px;
      height: 100%;
      background: #ffffff;
      .sider-table-box {
        height: 100%;
        width: 100%;
        .sider-tab {
          display: flex;
          align-items: flex-start;
          height: 40px;
          overflow: hidden;
          position: relative;
          background: #f2f3f5;
          .sider-prev {
            width: 40px;
            cursor: pointer;
            height: 40px;
            background: #ffffff url(@/assets/icon-prev.png) no-repeat center;
          }
          .sider-next {
            width: 40px;
            cursor: pointer;
            height: 40px;
            background: #ffffff url(@/assets/icon-next.png) no-repeat center;
          }
          .sider-tab-scroller {
            width: 100%;
            overflow-x: auto;
            white-space: nowrap;
            display: flex;
            height: 58px;
          }
          .tab-title {
            width: 130px;
            flex-shrink: 0;
            height: 40px;
            background: #f2f3f5;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            font-size: 14px;
            color: #4e5569;
            cursor: pointer;
            &.cur {
              background: #ffffff;
              font-family: PingFangSC-Medium;
              font-weight: 500;
              font-size: 14px;
              color: #262626;
            }
          }
        }
        .sider-table {
          padding: 12px;
          height: calc(100% - 40px);
          box-sizing: border-box;
          overflow: hidden;

          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 12px;
          color: #262626;
          line-height: 16px;
          /deep/.grey-cell {
            background: #f2f3f5;
            color: #4e5569;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            font-size: 12px;
            color: #262626;
            line-height: 16px;
            padding: 12px 8px;
          }
          /deep/.t-table td {
            padding: 8px 0 !important;
          }
        }
      }
    }
  }
}
</style>
